<template>
  <div class="navCharts">
    <div ref="mychart1" class="mychart2" :data="timeChart"></div>
  </div>
</template>
<script>
export default {
  name: 'navCharts',
  props: {
    timeChart: {
      type: Object,
      default: () => {}
    },
    echartId: {
      type: String,
      default: 'pieEbarChartschart'
    },
    times: Boolean
  },
  methods: {
    getChart () {
      const _this = this
      const num = this.timeChart.num
      const myChart = this.$echarts.init(this.$refs.mychart1)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },

        grid: {
          right: '35',
          top: '45',
          left: '20',
          bottom: '10',
          containLabel: true
        },
        legend: {
          textStyle: {
            color: 'white'
          },
          itemGap: 20,
          left: 290,
          top: '3%'
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeChart.xdata,
            axisPointer: {
              type: 'shadow'
            },
            // 文字样式
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white'
              },
              // interval:0,
              rotate: this.timeChart.rotate ? this.timeChart.rotate : 0,
              formatter: function (value) {
                // console.log(value);
                console.log(typeof value)
                if (_this.times) {
                  return value
                }
                if (!_this.times) {
                  let newParamsName = ''
                  const paramsNameNumber = value.length
                  const provideNumber = num
                  const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                  if (paramsNameNumber > provideNumber) {
                    for (let p = 0; p < rowNumber; p++) {
                      let tempStr = ''
                      const start = p * provideNumber
                      const end = start + provideNumber
                      if (p === rowNumber - 1) {
                        tempStr = value.substring(start, paramsNameNumber)
                      } else {
                        tempStr = value.substring(start, end) + '\n'
                      }
                      newParamsName += tempStr // 最终拼成的字符串
                    }
                  } else {
                    newParamsName = value
                  }
                  return newParamsName
                }
              }
            }
          }
        ],
        yAxis: this.timeChart.yname,
        series: this.timeChart.series
        // [
        //   {
        //     name: "综合达标率",
        //     type: "bar",
        //     barWidth: "50%",
        //     itemStyle: {
        //       color: "#92CC76",
        //     },
        //     data: [1.0, 0.8, 0.65, 0.6, 0.55, 0.5, 0.45, 0.4],
        //   },
        //   // {
        //   //   name: '全省平均值',
        //   //   type: 'line',
        //   //   smooth: true,
        //   //   symbol: 'none',
        //   //   itemStyle: {
        //   //     color: '#FF00D7'
        //   //   },
        //   //   // yAxisIndex: 1,  //折线这里就可以有自己的数据
        //   //   data: [0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45]
        //   // }
        // ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  mounted () {
    this.getChart()
  }
}
</script>

<style lang="scss" scoped>
/* height: 198px; */
.mychart2 {
  width: 100%;
  height: 100%;
}
</style>
